import React, { Component } from 'react';
import Debounce from 'lodash-decorators/debounce';
import Bind from 'lodash-decorators/bind';
import { connect } from 'dva';
import {
  Icon,
  Card,
  Collapse,
  Dropdown,
  Menu,
} from 'antd';
import { TimelineChart } from 'components/Charts';


const chartData = [];
for (let i = 0; i < 20; i += 1) {
  chartData.push({
    x: (new Date().getTime()) + (1000 * 60 * 30 * i),
    y1: Math.floor(Math.random() * 100) + 100,
    y2: Math.floor(Math.random() * 100) + 15,
    y3: Math.floor(Math.random() * 100) + 10,
  });
}

const projectData = ['makeblock', 'mBlockgo'];
const versionData = {
  makeblock: ['20190320193542', 'v5.1.1', 'v5.2.1'],
  mBlockgo: ['v1.0.0', 'v1.1.0', 'v1.2.0'],
};

const getWindowWidth = () => window.innerWidth || document.documentElement.clientWidth;

const Panel = Collapse.Panel;

function callback(key) {
  console.log(key);
}

const text = `
 这里显示：当前版本提测包的、当前测试分类的、最新的、测试报告；
 通过刷新按钮获取当前版本的最新信息（不支持动态更新）；
 通过下载按钮下载到本地（格式依据测试框架支持）；
 通过分享按钮生成测试报告URL；
`;

const customPanelStyle = {
  background: '#f7f7f7',
  borderRadius: 4,
  marginBottom: 12,
  marginTop: 12,
  overflow: 'hidden',
};

const menu = (
  <Menu>
    <Menu.Item key="0">
      <a href="#">2019-04-04 16:14:14</a>
    </Menu.Item>
    <Menu.Divider />
    <Menu.Item key="1">
      <a href="#">2019-04-04 15:32:16</a>
    </Menu.Item>
    <Menu.Item key="2">
      <a href="#">2019-04-04 14:29:39</a>
    </Menu.Item>
    <Menu.Item key="3">
      <a href="#">2019-04-04 10:13:42</a>
    </Menu.Item>
  </Menu>
);

const genExtra = () => (
  <div>
    <span style={{
      fontSize: 12,
      color: '#000000',
    }}>
      <Dropdown overlay={menu} >
        <a
        onClick={(event) => {
          event.stopPropagation();
        }}>
          2019-04-04 16:14:14 <Icon type="down" />
        </a>

      </Dropdown>
      <a
        style={{
          paddingTop: 5,
          paddingBottom: 5,
          paddingLeft: 10,
          paddingRight: 10,
          marginLeft: 4,
          marginRight: 400,
        }}
        onClick={(event) => {
          // If you don't want click extra trigger collapse, you can prevent this:
          event.stopPropagation();
        }}>查看报告
      </a>
    </span>
    <Icon
      type="sync"
      style={{
        paddingTop: 5,
        paddingBottom: 5,
        paddingLeft: 10,
        paddingRight: 10,
        marginLeft: 4,
        borderStyle: 'solid',
        borderColor: '#dcdcdc',
        borderWidth: 'thin'
      }}
      onClick={(event) => {
        // If you don't want click extra trigger collapse, you can prevent this:
        event.stopPropagation();
      }}
    />
    <Icon
      type="download"
      style={{
        paddingTop: 5,
        paddingBottom: 5,
        paddingLeft: 10,
        paddingRight: 10,
        marginLeft: 4,
        borderStyle: 'solid',
        borderColor: '#dcdcdc',
        borderWidth: 'thin'
      }}
      onClick={(event) => {
        event.stopPropagation();
      }}
    />
    <Icon
      type="share-alt"
      style={{
        paddingTop: 5,
        paddingBottom: 5,
        paddingLeft: 10,
        paddingRight: 10,
        marginLeft: 4,
        borderStyle: 'solid',
        borderColor: '#dcdcdc',
        borderWidth: 'thin'
      }}
      onClick={(event) => {
        event.stopPropagation();
      }}
    />
  </div>
);

@connect(({ autotest, loading }) => ({
  autotest,
  // loading: loading.effects['autotest/fetchTestTableData'],
  loading: loading.models.autotest,
}))
export default class Testtable extends Component {
  state = {
    operationkey: 'tab1',
    stepDirection: 'horizontal',
    versions: versionData[projectData[0]],
    secondVersion: versionData[projectData[0]][0],
  };

  componentDidMount() {
    // const { dispatch } = this.props;
    // dispatch({
    //   type: 'autotest/fetchTestTableData',
    // });

    // this.setStepDirection();
    // window.addEventListener('resize', this.setStepDirection);
  }

  componentWillUnmount() {
    // window.removeEventListener('resize', this.setStepDirection);
    // this.setStepDirection.cancel();
  }

  onOperationTabChange = key => {
    this.setState({ operationkey: key });
  };

  handleProjectChange = (value) => {
    this.setState({
      versions: versionData[value],
      secondVersion: versionData[value][0],
    });
  }

  onSecondVersionChange = (value) => {
    this.setState({
      secondVersion: value,
    });
  }


  @Bind()
  @Debounce(200)
  setStepDirection() {
    const { stepDirection } = this.state;
    const w = getWindowWidth();
    if (stepDirection !== 'vertical' && w <= 576) {
      this.setState({
        stepDirection: 'vertical',
      });
    } else if (stepDirection !== 'horizontal' && w > 576) {
      this.setState({
        stepDirection: 'horizontal',
      });
    }
  }

  render() {
    return (
      <div>
        <Card title="历史版本对比" style={{ marginBottom: 24 }} bordered={false}>
          <TimelineChart
            height={200}
            data={chartData}
            titleMap={{ y1: 'v5.1.1', y2: 'v5.1.0', y3: 'v5.1.2' }}
          />
        </Card>
        <Card title="最新报告概览" style={{ marginBottom: 24 }} bordered={false}>
          <Collapse
            bordered={false}
            defaultActiveKey={['1']}
            expandIcon={({ isActive }) => <Icon type="caret-right" rotate={isActive ? 90 : 0} />}
            onChange={callback}
          >
            <Panel header="Android兼容性测试" key="1" style={customPanelStyle} extra={genExtra()}>
              <Card>
                <p>{text}</p>
              </Card>
            </Panel>
            <Panel header="Android性能测试" key="2" style={customPanelStyle} extra={genExtra()}>
              <Card>
                <p>{text}</p>
              </Card>
            </Panel>
            <Panel header="Android功能测试" key="3" style={customPanelStyle} extra={genExtra()}>
              <Card>
                <p>{text}</p>
              </Card>
            </Panel>
          </Collapse>
        </Card>
      </div>
    );
  }
}